<template>
	<view>
		<uni-card style="width: 80%;margin: 50px auto;border-radius: 20px" title="新增员工">
			<uni-forms ref="baseForm" :modelValue="formData" :border="true">
				<uni-forms-item name="userName">
					<view class="form-item">
						<uni-icons type="person" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.userName" placeholder="请输入用户名" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="nickName">
					<view class="form-item">
						<uni-icons type="person-filled" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.nickName" placeholder="请输入姓名" />
						<!-- <view style="display: flex;">
							<uni-tag text="获取" type="error"  @click="getIdCard()"/>
						</view> -->
					</view>
				</uni-forms-item>
				<!-- <uni-forms-item name="password">
          <template v-slot="label">
            <view class="form-item">
              <uni-icons type="locked-filled" size="24"></uni-icons>
              <uni-easyinput v-model="formData.password" placeholder="请输入密码" />
            </view>
          </template>
        </uni-forms-item> -->
				<!-- <uni-forms-item name="captcha">
					<template v-slot="label">
						<view class="form-item">
							<uni-icons type="info" size="24"></uni-icons>
							<uni-easyinput v-model="formData.captcha" placeholder="请输入验证码" />
						</view>
					</template>
				</uni-forms-item> -->
				<uni-forms-item name="code">
					<view class="form-item">
						<uni-icons type="info" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.code" type="number" placeholder="请输入工号" />
						<!-- <button class="button" size="mini" type="default" @click="del(item.id)">删除</button> -->
						
					</view>
				</uni-forms-item>
				<uni-forms-item name="phonenumber">
					<view class="form-item">
						<uni-icons type="phone" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.phonenumber" placeholder="请输入手机" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="cardType">
					<view class="form-item">
						<!-- <uni-icons type="info" size="24"></uni-icons> -->
						<view style="width: 100%;">
						<uni-data-picker
						        v-model="formData.cardType"
								placeholder="请选择卡类型"
						        :localdata="typeData"
								:preload="true"
						      ></uni-data-picker>
						</view>
					</view>
				</uni-forms-item>
				
				<uni-forms-item name="remark">
					<view class="form-item">
						<uni-icons type="paperclip" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.remark" placeholder="请输入员工职务" />
					</view>
				</uni-forms-item>
			</uni-forms>
<!-- 			<view class="xieyi text-center">
			  <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
			  <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
			</view> -->
			<view slot="actions" class="card-actions" style="margin-bottom: 8px;">
				<view class="button-group">
					<button type="primary" class="block bg-blue lg round" style="width: 100%;margin-bottom: 10px;"
						@click="determine()">新增</button>
				</view>
			</view>
			<view>
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="请选择设备" @confirm="dialogInputConfirm">
						<view style="width: 100%;">
							<uni-data-select placeholder="点击选择设备" v-model="employee" :localdata="employees" emptyText="无"/>
						</view>
						
						<!-- <uni-forms>
							<uni-forms-item labelWidth="10px">
								
							</uni-forms-item>
						</uni-forms> -->
					</uni-popup-dialog>
				</uni-popup>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		addUser
	} from '@/api/system/user'
	import {
		listDevice,
		getEmpInfoBysn
	} from "@/api/company/device.js";
	export default {
		data() {
			return {
				show:false,
				typeData: [
				          { value: 1, text: "员工卡" },
				          { value: 2, text: "保全卡" },
				          { value: 3, text: "电工卡" },
						  { value: 16, text: "管理卡" },
				        ],
				employees: [],
				employee: '',
				
				// 基础表单数据
				formData: {
					userName: '',
					nickName: '',
					password: '123456',
					phonenumber: '',
					userType: '2',
					remark: '',
					companyId: '',
					code:'',
					cardType:'',
					empSn:''
				},
				rules: {
					userName: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名,以字母或数字开头，6至20位'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== '') {
										var reg = /^[A-Za-z0-9]{6,20}$/;
										if (!reg.test(value)) {
                      callback('以字母或数字开头，6至20位');
                    }
									} else {
										callback();
									}
								}
							},
						],
					},
					nickName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}, ],
					},
					cardType:{
						rules: [{
							required: true,
							errorMessage: '选择卡类型',
						} ],
					},
					code:{
						rules: [{
							required: true,
							errorMessage: '请输入工号',
						},{
							validateFunction: function(rule, value, data, callback) {
											if (value !== '') {
												var reg = /^([1-9](\d{0,3}))$|^([1-5]\d{4})$|^(6[0-4]\d{3})$|^(65[0-4]\d{2})$|^(655[0-2]\d)$|^(6553[0-5])$/;
												if (!reg.test(value)) {
							  callback('请输入1至65535之间的数字');
							}
											} else {
												callback();
											}
										}
						} ],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}, ],
					},
					phonenumber: {
						rules: [{
								required: false,
								errorMessage: '请输入手机号',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== '' && value !== null && value !== undefined) {
										var reg =/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
										if (!reg.test(value)) {
											callback('请输入有效的手机号码');
										}
									} else {
										// if (this.form.confirmPwd !== '') {
										// 	// this.$refs.uForm.validateField('confirmPwd');
										// 	callback(new Error('请输入新密码'));
										// }
										callback();
									}
								}
							},
							],
					},
				},
				imageURL: '../static/navigation/regup.png',
				value: '',
				range: [{
					"value": 0
				}]
			}
		},
		created() {},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		methods: {
			// 隐私协议
			handlePrivacy() {
			  this.$tab.navigateTo("/pages/privacy")
			},
			// 用户协议
			handleUserAgrement() {
					 this.$tab.navigateTo("/pages/protocol")
			},
			dialogInputConfirm() {
				if (this.employee != null && this.employee != "") {
					let data = {devSn:null}
					data.devSn = this.employee
					getEmpInfoBysn(data).then(res =>{
						if (res.code == 200) {
							this.formData.nickName = res.data.name
							this.formData.empSn = res.data.empSn
						} else {
							that.$modal.loading(res.msg)
						}
						this.$refs.inputDialog.close();
					})
					// this.$refs.devset.open(this.employee);
					this.employee = "";
				}else{
					this.$modal.msgError("请选择设备")
				}
			},
			determine() {
				let that = this
				uni.showLoading()
				this.formData.companyId = this.$store.getters.companyId
				this.$refs.baseForm.validate().then(res => {
					addUser(that.formData).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							that.$modal.msgSuccess("新增客户成功!")
							this.$tab.navigateBack()
						} else {
							that.$modal.loading(res.msg)
						}
					})
				}).catch(err => {
					uni.hideLoading()
				})
			},
			toLogin() {
				this.$tab.navigateTo('/pages/login')
			},
			getIdCard(){
				listDevice(
					{companyId: this.$store.getters.companyId}
				).then((res) => {
					let datas = [];
					res.rows.forEach((t) => {
						datas.push({
							value: t.devSn,
							text: t.devNum
						});
					});
					this.employees = datas;
				});
				this.$nextTick(() => {
				 this.$refs.inputDialog.open();
				});
			
			},
		},
	}
</script>

<style scoped lang="scss" scoped>
	.button-group {
		width: 80%;
		margin: 0 auto;
	}

	uni-image {
		height: 150px
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// background-image: url(./static/navigation/backreg.png);
		background-repeat: no-repeat;
		min-height: 100%;
		background-size: cover;
		height: auto;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.text-center {
		font-size: 12px;
	}

	/deep/.uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0px
	}
	.xieyi {
	  color: #333;
	  margin-top: 20px;
	}
</style>
